<template>
  <div>
    <el-tabs v-model="platformType" @tab-click="doChangeTab()">
      <el-tab-pane label="快递鸟面单" name="999"></el-tab-pane>
      <el-tab-pane label="抖音面单" name="1"></el-tab-pane>
      <el-tab-pane label="淘宝菜鸟面单" name="3"></el-tab-pane>
      <el-tab-pane label="拼多多面单" name="4"></el-tab-pane>
    </el-tabs>
    <el-form :model="defaultExpressOutletsForm" label-position="right" label-width="80px" class="pad-30">
      <el-form-item label="添加网点:">
        <div>
          <el-select v-model="defaultExpressOutletsForm.enterpriseExpressId" @change="defaultExpressChange()" placeholder="请选择快递公司" style="width: 150px;">
            <el-option v-for="(val, key) in expressOutletsList"
              :key="val.enterpriseExpressOutletsList[0].enterpriseExpressId"
              :label="val.enterpriseExpressOutletsList[0].expressName"
              :value="val.enterpriseExpressOutletsList[0].enterpriseExpressId">
            </el-option>
          </el-select>
          <el-select v-if="platformType != '999'" v-model="defaultExpressOutletsForm.shopId" @change="shopChange()"
          placeholder="请选择店铺" style="width: 150px;">
            <el-option v-for="item in shopList" :key="item.shopId" :label="item.shopName" :value="item.shopId"/>
          </el-select>
          <el-select v-model="defaultExpressOutletsForm.expressOutletsId" placeholder="请选择网点" style="width: 150px;">
            <el-option v-for="(val, key) in outletsList" :key="key" :label="val.sendName" :value="val.enterpriseExpressOutletsId"/>
          </el-select>
          <el-button type="primary" @click="enableExpressOutlets()">添加</el-button>
        </div>
        <!-- 表格 -->
        <div>
          <el-table  ref="multipleTable" :data="dataList" v-loading="listLoading"
              element-loading-text="加载中" style="width: 100%"
              header-cell-class-name="default-header" row-class-name="default-row">
            <el-table-column width="180px" label="快递公司" prop="expressName" align="left">
              <template slot-scope="scope">
              {{scope.row.expressName}}
              </template>
            </el-table-column>
            <el-table-column width="100px" label="店铺">
              <template slot-scope="scope">
                {{ scope.row.shopName ? scope.row.shopName : '-' }}
              </template>
            </el-table-column>
            <el-table-column width="150px" label="网点" prop="expressType" >
              <template slot-scope="scope">
                <div>{{ scope.row.sendName }}</div>
                <div>代码：{{ scope.row.sendSite }}</div>
              </template>
            </el-table-column>
            <el-table-column min-width="200px" label="操作" align="right" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" size="medium" @click="enableExpressOutlets(scope.row)">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form-item>
    </el-form>
    <!-- <div slot="footer" class="dialog-footer">
      <el-button @click="defaultExpressOutletsVisible = false">关闭</el-button>
    </div> -->
  </div>
</template>

<script>
  // import { getOrderInfo } from '@/api/goods/order'
  // import { printProjectSend } from '@/api/order/projectSend'
  import { updateExpressOutletsDefault, listDefaultExpressOutlets, listAllExpressOutlets } from '@/api/goods/expressOutlets'

  export default {
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.platformType = '999'
          this.init()
        }
      }
    },
    data() {
      return {
        platformType: '999',
        listLoading: false,
        // 快递网点默认实体
        defaultExpressOutletsForm: {
          enterpriseExpressId: '',
          platformType: '',
          shopId: '',
          expressOutletsId: ''
        },
        // 默认快递网点集合
        dataList: [],
        expressOutletsList: [],
        outletsList: [],
        shopList: [],
        defaultQuery: {
          enterpriseId: this.getEnterpriseId(),
          supplierId: this.getSupplierId()
        }
      }
    },
    // 初始化页面
    created() {
      this.init()
    },
    methods: {
      init() {
        this.listAllExpressOutlets()
        this.listDefaultExpressOutlets()
      },
      doChangeTab() {
        this.defaultExpressOutletsForm.enterpriseExpressId = ''
        this.defaultExpressOutletsForm.shopId = ''
        this.defaultExpressOutletsForm.expressOutletsId = ''
        this.init()
      },
      // 查询网点信息
      listAllExpressOutlets() {
        this.defaultQuery.defaultFlag = 0
        this.defaultQuery.platformType = this.platformType
        listAllExpressOutlets(this.defaultQuery).then(response => {
          if (response.isError) return
          this.expressOutletsList = response.data
        })
      },
      // 查询平台默认网点
      listDefaultExpressOutlets() {
        this.listLoading = true
        this.defaultQuery.defaultFlag = 1
        this.defaultQuery.platformType = this.platformType
        listDefaultExpressOutlets(this.defaultQuery).then(response => {
          if (response.isError) return
          this.dataList = response.data
          this.listLoading = false
        })
      },
      // 默认网点设置快递选择事件
      defaultExpressChange() {
        const enterpriseExpressId = this.defaultExpressOutletsForm.enterpriseExpressId
        if (this.expressOutletsList && enterpriseExpressId) {
          this.defaultExpressOutletsForm.expressOutletsId = ''
          this.defaultExpressOutletsForm.shopId = ''
          this.expressOutletsList.forEach(e => {
            if (e.enterpriseExpressId === enterpriseExpressId) {
              const outletsList = e.enterpriseExpressOutletsList
              this.outletsList = outletsList
              if (this.platformType !== '999') {
                const shopList = []
                const shopIdArr = []
                outletsList.forEach(o => {
                  if (shopIdArr.indexOf(o.shopId) < 0) {
                    shopList.push({ shopId: o.shopId, shopName: o.shopName })
                    shopIdArr.push(o.shopId)
                  }
                })
                this.shopList = shopList
              }
            }
          })
        }
      },
      // 默认网点店铺选择事件
      shopChange() {
        const enterpriseExpressId = this.defaultExpressOutletsForm.enterpriseExpressId
        const shopId = this.defaultExpressOutletsForm.shopId
        if (this.expressOutletsList && enterpriseExpressId) {
          this.defaultExpressOutletsForm.expressOutletsId = ''
          this.expressOutletsList.forEach(e => {
            if (e.enterpriseExpressId === enterpriseExpressId) {
              const outletsList = e.enterpriseExpressOutletsList
              const defaultOutlets = []
              outletsList.forEach(o => {
                if (shopId === o.shopId) {
                  defaultOutlets.push(o)
                }
              })
              this.outletsList = defaultOutlets
            }
          })
        }
      },
      // 添加企业默认网点
      enableExpressOutlets(row) {
        let enterpriseExpressId = ''
        let shopId = ''
        let expressOutletsId = ''
        let defaultFlag = 0
        if (!row) {
          enterpriseExpressId = this.defaultExpressOutletsForm.enterpriseExpressId
          shopId = this.defaultExpressOutletsForm.shopId
          expressOutletsId = this.defaultExpressOutletsForm.expressOutletsId
          defaultFlag = 1
          if (!enterpriseExpressId) {
            this.$message({ type: 'error', message: '请选择快递公司！' })
            return
          }
          if (!expressOutletsId) {
            this.$message({ type: 'error', message: '请选择网点！' })
            return
          }
          if (this.platformType !== '999' && !shopId) {
            this.$message({ type: 'error', message: '请选择店铺！' })
            return
          }
        } else {
          expressOutletsId = row.enterpriseExpressOutletsId
          enterpriseExpressId = row.enterpriseExpressId
          shopId = row.shopId
        }
        const params = {
          enterpriseId: this.getEnterpriseId(),
          supplierId: this.getSupplierId(),
          platformType: this.platformType,
          enterpriseExpressOutletsId: expressOutletsId,
          enterpriseExpressId: enterpriseExpressId,
          defaultFlag: defaultFlag,
          shopId: shopId
        }
        updateExpressOutletsDefault(params).then(response => {
          if (response.isError) return
          this.$message({ type: 'success', message: '设置成功！' })
          this.defaultExpressOutletsForm.enterpriseExpressId = ''
          this.defaultExpressOutletsForm.shopId = ''
          this.defaultExpressOutletsForm.expressOutletsId = ''
          this.shopList = []
          this.outletsList = []
          this.listDefaultExpressOutlets()
        })
      }
    }
  }
</script>